<template>
    <div>
        <h1>这里是商品展示</h1>
        <table>
            <tr>
                <td>商品名</td>
                <td>价格</td>
                <td>图片</td>
                <td>操作</td>
            </tr>
            <tr v-for="(i,j) in goodslist">
                <td>{{i.name}}</td>
                <td>{{i.price}}</td>
                <td><img :src="localhost+'static/upload/1/'+i.img" alt=""></td>
                <td>
                    <van-button color='red' @click="del_goods(i.id)">删</van-button>
                </td>
            </tr>
        </table>
        <van-pagination v-model="page" :total-items="count" :items-per-page="2" @change="get_goods"/>

        <van-field type="text" label="名称" placeholder="" v-model="name"/>
        <van-field type="text" label="价格" placeholder="" v-model="price"/>
        <van-uploader :after-read="afterread" label='选择图片'/>
        <van-button type="primary" @click="add_goods">添加信息</van-button>

        


        
    </div>
</template>

<script>
export default {
   data () {
      return {
          name:'',
          price:'',
          filename:"",
          goodslist:'',
          count:0,
          page:1,
          //添加数据
          formData:'',
          name:'',
          price:'',
      };
   },

    methods: {
            //获取分页数据
            get_goods:function(){
                this.axios.get(this.localhost+'get_goods/?page='+this.page)
                .then(res=>{
                    console.log(res);
                    this.goodslist = res.data.res;
                    this.count = res.data.count;
                })
            },
            //删除数据
            del_goods:function(id){
                console.log(id);
                this.axios.delete(this.localhost+'del_goods/?id='+id).then(res=>{
                    console.log(res);
                    if (res.data.code == 200){
                        this.$toast.success(res.data.meg)
                    }
                    this.get_goods(1)
                })
            },
            //图片
            afterread:function(file){
                let img = file.file;
                this.formData = new FormData();
                this.formData.append('img',img);
            },
            //添加
            add_goods:function(){
                this.formData.append('name',this.name)
                this.formData.append('price',this.price)
                this.axios.post(this.localhost+'add_goods/',this.formData)
                .then(res=>{
                    console.log(res);
                    this.get_goods()
                })

            }
       },

    computed: {

       },

    created () {

       },

    mounted() {
            this.get_goods(1)
       },

    components: {

       }
}
</script>
<style lang='css' scoped>

</style>